import React, { Component } from 'react';
// HashRouter
// 1. 引入三个组件 HashRouter Route Link
import { HashRouter as Router,Route,Link} from "react-router-dom"
// 5. 定义要渲染的组件
const File = ()=>{
  return <h1>文件</h1>
}
const Edit = ()=>{
  return <h1>编辑</h1>
}
const Choose = ()=>{
  return <h1>选择</h1>
}
class App extends Component {
  render() {
    {/*2. 配置根节点*/}
    return (
      <Router>
        {/* 3. 定义跳转的 Link  组件*/}
        <Link to="/file">文件</Link>
        <Link to="/edit">编辑</Link>
        <Link to="/choose">选择</Link>
        {/*4. 定义路由和组件 之间的对应关系*/}
        <Route path="/file" component={File}></Route>
        <Route path="/edit" component={Edit}></Route>
        <Route path="/choose" component={Choose}></Route>
      </Router>
    );
  }
}

export default App;
